<template>
  <div ref="containerRef" :style="styleObject" class="print-page-container"></div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref, toRefs, unref } from 'vue';
  import { JnpfSheetsPrintUiService } from '../../../Design/univer/services/sheet-print-ui.service';

  const props = defineProps(['jnpfUniverApi', 'pageLayout', 'printConfig']);
  const emits = defineEmits(['rendered']);

  const containerRef = ref();

  interface State {
    render: any;
    styleObject: any;
  }
  const state = reactive<State>({
    render: null,
    styleObject: { width: '100px', height: '100px' },
  });
  const { styleObject } = toRefs(state);

  onMounted(() => {
    // 要先判断下节点有没有出来
    const { jnpfUniverApi, pageLayout } = props ?? {};

    const { config, previewScale } = (pageLayout || {}) as any;
    const pageSize = jnpfUniverApi?.getSheetsPrint()?.getPaperSize();
    const scale = Math.round(previewScale * (794 / pageSize.w) * 10) / 10;
    state.render = new JnpfSheetsPrintUiService(jnpfUniverApi?.getSheets()?.getInjector(), config, false, scale);
    state.styleObject.width = pageSize.w * scale + 'px';
    state.styleObject.height = pageSize.h * scale + 'px';
    state.render.container.style.width = '100%';
    state.render.container.style.height = '100%';
    unref(containerRef)?.appendChild(state.render.container);
    state.render.updateConfig(config);
    state.render.render();
    state.render.renderOnReady();

    emits('rendered');
  });
</script>

<style lang="less">
  .print-page-container {
    position: relative;
    flex: 0 0 auto;
    margin: 28px auto;
    background-color: #fff;
    box-shadow: 0 4px 24px 0 rgba(30, 34, 43, 0.08);
  }
</style>
